<template>
  <div class="home">
    <h2>home当前计数: {{ $store.state.counter }}</h2>
    <!-- <button @click="actionCounterBtnClick">发起action修改counter</button> -->
    <button @click="incrementAction">发起action修改counter</button>
    <h2>name: {{ $store.state.name }}</h2>
    <!-- <button @click="actionNameBtnClick">发起action修改name</button> -->
    <button @click="changeNameAction('coderwhy22222')">发起action修改name</button>
  </div>
</template>

<!--option中使用mapActions-->
<script>
  import {CHANGE_INFO} from '../store/mutation_type.js'
  import { mapMutations, mapActions } from 'vuex'
  export default {
    // methods: {
    //   actionCounterBtnClick() {
    //     this.$store.dispatch('incrementAction') //action叫派发,mutation叫提交commit
    //   },
    //   actionNameBtnClick() {
    //     this.$store.dispatch('changeNameAction', 'coderwhy222')
    //   }
    // }
    // methods: {
    //   ...mapActions(['incrementAction', 'changeNameAction'])
    // }
  }
</script>

<!--setup中使用mapActions-->
<script setup>
  import { useStore,mapState, mapGetters, mapMutations, mapActions } from 'vuex'
  import { toRefs } from 'vue'
  import { computed } from "vue";
  import useState from "../hooks/useState.js";
  import { CHANGE_INFO } from '../store/mutation_type.js'

  // 1. setup中使用mapActions辅助函数
  const store = useStore()
  // const {incrementAction, changeNameAction} = mapActions(['incrementAction', 'changeNameAction']) // 不起作用,内部使用的是this.$store.dispatch,而setup中没有this
  // const actions = mapActions(['incrementAction', 'changeNameAction']) // 不起作用,内部使用的是this.$store.dispatch,而setup中没有this
  // console.log(actions)
  // const newActions = {}
  // Object.keys(actions).forEach(key => {
  //   newActions[key] = actions[key].bind({$store: store}) // 绑定this,因为内部绑定this.$store
  // })
  // const {incrementAction, changeNameAction} = newActions

  // 2. 使用默认做法,不使用辅助函数
  function incrementAction() {
    store.dispatch('incrementAction')
  }
  function changeNameAction() {
    store.dispatch('changeNameAction', 'coderwhy222')
  }

</script>

<style scoped>
</style> 